
<template>
  <div>
    <div class="bgimg" id="allPage">
  <div class="divfather"  >
      <br>
     <h1 class="headtop" >准考证</h1>
     <br>


  <table  class="stutab"  border="1px">
    <tr>
      <td>学号</td>
      <td>{{student.studentId}}</td>
      <td width="150px" rowspan="4">
          <img :src="student.studentPhoto" width="150px" height="232px"/>
      </td>
    </tr>
    <tr>
      <td>姓名</td>
      <td >{{student.studentName}}</td>

    </tr>
    <tr>
      <td>性别</td>
      <td>{{student.studentSex}}</td>

    </tr>
    <tr>
      <td>考试科目</td>
      <td>
        <span  v-for="exam in student.exams">{{exam.course.courseName}}   </span>
      </td>
    </tr>
    <tr>
      <td>考试地点</td>
      <td colspan="2">
        <span  v-for="exam in student.exams">{{exam.course.courseName}}：{{exam.examPlace}} <br>  </span>
      </td>
    </tr>
    <tr>
      <td>考试时间</td>
      <td colspan="2">
        <span  v-for="exam in student.exams">{{exam.course.courseName}} : {{exam.examTime | dateFormat}} <br> </span>
      </td>
    </tr>
  </table>

    </div>
    <div class="div_s">
    </div>
    <el-dialog title="考试详情" :visible.sync="dialogTableVisible">
      <el-table :data="examInfo"  >
        <el-table-column prop="course.courseName"   label="科目"  width="150"> </el-table-column>
        <el-table-column label="分数" width="200">
          <template slot-scope="scope">
            <p >{{score}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="examPlace" label="地址"></el-table-column>
      </el-table>

    </el-dialog>

  </div>
<div style="text-align:center">
  <el-button type="text" size="medium" @click.native="getMessage1">考试详情</el-button>
  <el-button type="text" size="medium" @click.native="printCard">打印下载</el-button>
</div>
</div>
</template>
<style scope>
  .stutab {
   width:500px;
   border-width: 2px;
   border-spacing: 0;
   border-color: lightgray;
   margin-left: 50px;

  }
.stutab tr{
    height: 60px;
    text-align: center;
}
.divfather{
  text-align: center;
  width: 600px;
  height: 480px;
  border-style: solid;
  margin: 100px auto 10px;
}
.div_s{
  width: 600px;
  text-align: center;
  margin: 0 auto;
}
.bgimg{
  width: 100%;
}
</style>
<script>
  import {getStudentInfo} from '@/axios/api' //此处为api里面的方法
  import {formatDate} from '@/common/js/date.js'
  export default {
    data() {
      return {
        //此处是解释模拟数据的地
        student:'',
        examInfo:[],
        dialogTableVisible: false
      }
    },
    filters: {
      dateFormat:(date) => {
        if (date == undefined) {
          return "";
        }
        return formatDate(new Date(date),'yyyy-MM-dd hh:mm:ss');
      }
    },
    methods:{
      printCard() {
        // let bdhtml=$('#allPage').html();
        // let sprnstr="<!--startprint-->";
        // let eprnstr="<!--endprint-->";
        // let prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+17);
        // prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
        window.document.body.innerHTML=window.document.getElementById('allPage').innerHTML;
        window.print();
        //window.print();
      },
      getExamMsg:function(){
        getStudentInfo().then (res => {
          this.examInfo=res.resData.exams;
          this.student = res.resData;
          // console.log(this.tableData);
        })
      },
      getMessage1:function(){
        this.score=100,
        this.dialogTableVisible=true,
        getStudentInfo().then (res => {
          this.examInfo=res.resData.exams;
          // console.log(this.tableData);
        })
      },
    },

    //当前及时刷新
    mounted() {
      this.getExamMsg();

    },

    }

</script>
